How to Create a Responsive Footer for Your Website with Bootstrap 5

Table of Contents

1. Project Introduction
2. HTML Code
3. CSS Code
4. Conclusion
5. Preview

The footer is the bottom area of your website, and it's an important part of the layout. It's where you place details about yourself and your company, like links to your social media profiles or contact information.

When you create a website, one of the most important things to take into account is what happens at the bottom of your page. A well-designed footer can improve the user experience, provide important information, and even help with search engine optimization. This article will walk through how to create a responsive footer for your blog or website using Bootstrap.

Let's start making an amazing responsive footer using Bootstrap 5 step by step.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Step 1 (HTML Code):

To create a responsive footer with Bootstrap, you first need to create a basic HTML file. This file will contain all of the elements that make up your responsive footer.

Next, you need to include the bootstrap module in your HTML file. This module will provide you with the necessary tools to create a responsive footer.

Download icons from here.

Let's break it down:

1. .footer-main

.footer-main{
    padding-top: 90px;
}

• Adds 90px padding to the top of the footer.
• Ensures the content inside the footer does not touch the top.

2. .address-main > div.col-lg-4

.address-main > div.col-lg-4 {
    border-bottom: dotted 1px #999;
}

• Adds a dotted bottom border with a gray color (#999) to each .col-lg-4 inside .address-main.
• Helps separate each section (Address, Phone, Email) visually.

3. .address-box

.address-box {
    padding: 10px 0;
    margin-bottom: 30px;
}

• Adds vertical padding (10px top & bottom) inside the box.
• Creates spacing between address boxes using margin-bottom: 30px.

4. .add-icon

.add-icon{
    float: left;
    width: 60px;
    display: inline-block;
    padding: 0px 5px;
}

• Floats the icon to the left.
• Gives it a fixed width of 60px.
• Uses display: inline-block; to ensure it aligns properly.
• Adds 5px padding.

5. .address-box .add-icon (More specific)

.address-box .add-icon {
    background: #27303b;
    height: 75px;
    line-height: 75px;
    width: 75px;
    margin-right: 20px;
    text-align: center;
}

• Adds a background color (#27303b).
• Sets height and width to 75px (making it a square).
• Uses line-height: 75px; to center the image vertically.
• Aligns text/icons to the center using text-align: center;.
• Adds margin-right: 20px to create spacing between the icon and text.

6. .add-icon img

.add-icon img{
    width: 100%;
}

• Ensures the image inside .add-icon scales to 100% width.

7. .address-box .add-icon img (More specific)

.address-box .add-icon img {
    max-width: 40px;
}

• Limits the maximum width of the icon image to 40px to prevent it from being too large.

8. .add-content

.add-content{
    padding-left: 70px;
}

• Creates space between the icon and the text content.

9. .add-content h5

.add-content h5 {
    font-size: 17px;
    color: #ffffff;
    padding: 0;
    font-weight: 500;
    margin-bottom: 10px;
}

• Styles the heading (e.g., "Address", "Phone", "Email"):
• Font size: 17px
• Text color: White (#ffffff)
• Weight: Semi-bold (500)
• Removes extra padding
• Adds spacing below (margin-bottom: 10px)

10. .add-content p

.add-content p {
    font-size: 13px;
    color: #999999;
    font-weight: 300;
}

• Styles the paragraph text:
• Font size: 13px
• Color: Light gray (#999999)
• Font weight: Light (300)

11. .add-content p a

.add-content p a{
    font-size: 14px;
    color: #999999;
    font-weight: 300;
    word-wrap: break-word;
}

• Styles the links inside the paragraph (<a> tags inside <p>):
• Font size: 14px (slightly larger than normal text)
• Color: Gray (#999999)
• Font weight: Light (300)
• Ensures long words do not break layout (word-wrap: break-word;)

12. .add-content p a:hover

.add-content p a:hover{
    color: #ffb32d;
}

• Changes the text color to orange (#ffb32d) when hovered.

Step 2 (CSS Code):

Finally, you will need to add some CSS classes to your footer template to make it look prettier. Let's break it down step by step:

1. .footer-main

.footer-main {
    padding-top: 90px;
}

• Adds 90 pixels of top padding to the footer section.

2. .address-main > div.col-lg-4

.address-main > div.col-lg-4 {
    border-bottom: dotted 1px #999;
}

• Selects all <div> elements with the class col-lg-4 that are direct children of .address-main.
• Adds a dotted bottom border of 1px with a gray color #999.

3. .address-box

.address-box {
    padding: 10px 0;
    margin-bottom: 30px;
}

• Adds 10 pixels of vertical padding (top & bottom).
• Adds 30 pixels of bottom margin for spacing between .address-box elements.

4. .add-icon

.add-icon {
    float: left;
    width: 60px;
    display: inline-block;
    padding: 0px 5px;
}

• Floats the icon to the left.
• Sets fixed width of 60px.
• Makes it an inline-block element.
• Adds left & right padding of 5px.

5. .address-box .add-icon

.address-box .add-icon {
    background: #27303b;
    height: 75px;
    line-height: 75px;
    width: 75px;
    margin-right: 20px;
    text-align: center;
}

• Gives the icon a dark background color (#27303b).
• Sets a fixed height & width of 75px.
• Uses line-height: 75px; to vertically center text/icons.
• Adds 20px right margin to create spacing between the icon and the text.
• Centers the content inside the icon using text-align: center;.

6. .add-icon img

.add-icon img {
    width: 100%;
}

• Makes the image inside .add-icon 100% of its container width.

7. .address-box .add-icon img

.address-box .add-icon img {
    max-width: 40px;
}

• Limits the maximum width of the image inside .add-icon to 40px.

8. .add-content

.add-content {
    padding-left: 70px;
}

• Adds 70px of left padding, to create space for the floating .add-icon.

9. .add-content h5

.add-content h5 {
    font-size: 17px;
    color: #ffffff;
    padding: 0;
    font-weight: 500;
    margin-bottom: 10px;
}

• Sets the font size to 17px.
• Changes text color to white (#ffffff).
• Removes padding (0).
• Sets font weight to 500 (semi-bold).
• Adds a 10px bottom margin for spacing.

10. .add-content p

.add-content p {
    font-size: 13px;
    color: #999999;
    font-weight: 300;
}

• Sets font size to 13px.
• Changes text color to gray (#999999).
• Uses a lighter font weight (300).

11. .add-content p a

.add-content p a {
    font-size: 14px;
    color: #999999;
    font-weight: 300;
    word-wrap: break-word;
}

• Sets font size to 14px.
• Changes link color to gray (#999999).
• Uses a lighter font weight (300).
• Enables word wrapping to prevent long links from overflowing.

12. .add-content p a:hover

.add-content p a:hover {
    color: #ffb32d;
}

• When a user hovers over the link, the text color changes to orange (#ffb32d).

Conclusion:

In this article, we've shown you how to create a responsive footer for your website using Bootstrap 5. A well-designed footer can help to improve the user experience of your website and provide important information to your visitors. By following the steps in this guide, you can create a footer that looks great on all devices and provides valuable information to your visitors. Remember to also incorporate best practices in your footer design to make it more effective. We hope this guide has been helpful to you in designing your website's footer.